<!--
  - Copyright (c) 2019.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
  <div v-if="true">
    <el-row>
      <el-col :span="4" align="left" style="line-height: 36px;height: 36px">
        <span style="font-size: 14px;color: #747778">居住信息</span>
      </el-col>

      <el-col :offset="18" :span="2" align="right">
        <el-button v-show="canEdit && isShow && editable" size="small" @click="edit()" plain>编辑</el-button>
      </el-col>
    </el-row>
    <el-row style="justify-content: center">
      <el-button @click="addNew()"
                 style="margin: 8px 0px 8px 0px;padding: 6.2px 7px;font-size: 13px;line-height: 18px"
                 v-if="!isShow && editable" round>
        <i class="joys-icon-new" style="margin-right: 12px;margin-left: 4px"/>
        <span style="margin: 0px;display: inline-block;font-size: 14px;">添加居住信息</span>
      </el-button>
      <span v-if="!personInfo && !editable">没有数据</span>

    </el-row>

    <el-form ref="personInfo"
             :model="personInfo"
             v-show="isShow"
             :class="{cardBackColor:!canEdit}"
             :rules="rules"
             style="text-align: left;padding-top: 12px" inline >
      <el-row style="padding-left: 12px;padding-right: 12px;padding-bottom: 24px">
        <el-col :md="8" :lg="6">
          <el-form-item label="居住状况" prop="residentialCondition">
            <ft-data-enum-select v-model="personInfo.residentialCondition"
                                 type-name="residentialStatus"
                                 placeholder="请选择"
                                 :editing="!canEdit">
            </ft-data-enum-select>
          </el-form-item>
        </el-col>
        <el-col :md="8" :lg="6">
          <el-tooltip placement="top" effect="light" :disabled="disabledAdd">
            <div slot="content" >{{personInfo.residentialAddress}}</div>
            <el-form-item label="居住地址" prop="residentialAddress">
              <ft-input :editing="!canEdit" v-model="personInfo.residentialAddress"
                        placeholder="请输入内容"></ft-input>
            </el-form-item>
          </el-tooltip>
        </el-col>
        <el-col :md="8" :lg="6">
          <el-form-item label="居住地邮编" prop="residentialPostcode">
            <ft-number-input :editable="!canEdit" :split="false" v-model="personInfo.residentialPostcode" :precision='[6]' />
          </el-form-item>
        </el-col>
        <el-col :md="8" :lg="6">
          <el-form-item label="居住地行政区划" prop="residentialLocation">
            <ft-data-enum-select
              v-model="personInfo.residentialLocation"
              type-name="area"
              placeholder="请选择"
              :editing="!canEdit">
            </ft-data-enum-select>
          </el-form-item>
        </el-col>
        <el-col :md="8" :lg="6">
          <el-tooltip placement="top" effect="light" :disabled="disabledPhone">
            <div slot="content" >{{personInfo.residentialPhone}}</div>
            <el-form-item label="住宅电话" prop="residentialPhone">
              <ft-input :editing="!canEdit" v-model="personInfo.residentialPhone"
                        placeholder="请输入内容"></ft-input>
            </el-form-item>
          </el-tooltip>
        </el-col>
        <el-col :md="8" :lg="6">
          <el-tooltip placement="top" effect="light" :disabled="disabledCom">
            <div slot="content" >{{personInfo.communicationAddress}}</div>
            <el-form-item label="通讯地址" prop="communicationAddress">
              <ft-input :editing="!canEdit" v-model="personInfo.communicationAddress"
                        placeholder="请输入内容"></ft-input>
            </el-form-item>
          </el-tooltip>
        </el-col>
        <el-col :md="8" :lg="6">
          <el-form-item label="通讯地邮编" prop="communicationPostcode">
            <ft-number-input :editable="!canEdit" :split="false" v-model="personInfo.communicationPostcode" :precision='[6]' />
          </el-form-item>
        </el-col>
        <el-col :md="8" :lg="6">
          <el-form-item label="通讯地行政区划" prop="communicationLocation">
            <ft-data-enum-select
              v-model="personInfo.communicationLocation"
              type-name="area"
              placeholder="请选择"
              :editing="!canEdit">
            </ft-data-enum-select>
          </el-form-item>
        </el-col>
      </el-row>
      <hr style="background-color: #EDEDED;border: none;height: 1px;margin: 0px" v-show="!canEdit"/>
      <el-row style="padding:8px 0px" v-show="!canEdit">
        <el-col style="text-align: right">
          <el-button size="mini" @click="cancel">取消</el-button>
          <el-button size="mini" type="primary" @click="onSave"
                     style="margin-left: 24px;margin-right: 36px"
                     :disabled="canEdit">保存
          </el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  import FtDatePicker from "../ft/FtDatePicker"
  import FtInput from "../ft/FtInput"
  import {postCode} from "@/pages/pc/assets/js/validate/rule"
  export default {
    name: "CompanyInfo",
    components:{FtDatePicker,FtInput},
    props:{
      customerId: {
        type : String,
        default : '',
      },
      dataVersion: {
        type : Number,
        default : 0,
      },
      editable: {
        type : Boolean,
        default : true,
      },
    },
    data(){
      let validatePostCode = (rule, value, callback) => {
        if (value != '' && value != null && !postCode(value)) {
          callback(new Error("请输入正确的邮编"))
        } else {
          callback()
        }
      }

      return {
        personInfo:{},
        personInfoBack:{},
        canEdit:true,
        isShow: false,
        outTime:0,
        disabledAdd:true,
        disabledPhone:true,
        disabledCom:true,
        rules:{
          residentialAddress:[
            {max: 100, message: '输入字符不得超过100字', trigger: 'blur'}],
          residentialPhone:[
            {max: 25, message: '输入字符不得超过25字', trigger: 'blur'}],
          communicationAddress:[
            {max: 100, message: '输入字符不得超过100字', trigger: 'blur'}],
          residentialAddress:[{max: 100, message: '输入字符不得超过100字', trigger: 'blur'}],
          residentialPhone:[{max: 25, message: '输入字符不得超过25字', trigger: 'blur'}],
          communicationAddress:[{max: 100, message: '输入字符不得超过100字', trigger: 'blur'}],
          residentialPostcode:[{validator:validatePostCode,trigger:'blur'}],
          communicationPostcode:[{validator:validatePostCode,trigger:'blur'}]
        }
      }
    },
    mounted(){
      this.load()
    },
    methods:{
      //显示表体
      addNew() {
        this.isShow = true
        this.canEdit = false
      },
      //表单取消按钮
      cancel(){
        this.canEdit = true
        this.personInfo =this.personInfoBack
        this.$refs.personInfo.clearValidate()
      },
      onSave(){
        if (this.dataVersion > this.personInfo.dataVersion) {
          this.personInfo.dataVersion = this.dataVersion
        }
        this.$refs.personInfo.validate((valid) => {
          if (valid) {
            this.$http.put('/joys-rest/lss-customer/custInfo/person/',this.personInfo, {
              params: {
                sourceModule: "居住信息",
              }
            }).then(
              resp=>{
                this.personInfo=resp.body
                this.canEdit=true
                //初始信息框
                this.disabledAdd = true
                this.disabledPhone= true
                this.disabledCom = true
                //信息框有值就显示
                if (this.personInfo.residentialAddress != '' && this.personInfo.residentialAddress != null) {
                  this.disabledAdd = false
                }
                if (this.personInfo.residentialPhone != '' && this.personInfo.residentialPhone != null){
                  this.disabledPhone = false
                }
                if (this.personInfo.communicationAddress != '' && this.personInfo.communicationAddress != null){
                  this.disabledCom = false
                }
                //更新dataVersion值
                this.$emit("changeDataVersion",this.personInfo.dataVersion)
                this.$message.success("保存成功！")
              },
              resp=>{
                this.$message.error(resp.body.message)
              })
          }
          else{
            return false;
          }
        })
      },
      load(){
        this.$http.get('/joys-rest/lss-customer/custInfo/person/'+this.customerId).then(
          resp=>{
            this.personInfo=resp.body
            if (this.personInfo.residentialCondition !=null && this.personInfo.residentialCondition != ''){
              this.isShow = true
            }
            if (this.personInfo.residentialAddress !=null && this.personInfo.residentialAddress != ''){
              this.isShow = true
            }
            if (this.personInfo.residentialPostcode !=null && this.personInfo.residentialPostcode != ''){
              this.isShow = true
            }
            if (this.personInfo.residentialLocation !=null && this.personInfo.residentialLocation != ''){
              this.isShow = true
            }
            if (this.personInfo.residentialPhone !=null && this.personInfo.residentialPhone != ''){
              this.isShow = true
            }
            if (this.personInfo.communicationPostcode !=null && this.personInfo.communicationPostcode != ''){
              this.isShow = true
            }
            if (this.personInfo.communicationLocation !=null && this.personInfo.communicationLocation != ''){
              this.isShow = true
            }
            if (this.personInfo.residentialAddress != '' && this.personInfo.residentialAddress != null) {
              this.disabledAdd = false
            }
            if (this.personInfo.residentialPhone != '' && this.personInfo.residentialPhone != null){
              this.disabledPhone = false
            }
            if (this.personInfo.communicationAddress != '' && this.personInfo.communicationAddress != null){
              this.disabledCom = false
            }
          },
          resp=>{
            this.$message.error(resp.body.message)
          }
        )
      },
      //表单编辑按钮
      edit(){
        this.canEdit = false
        this.personInfoBack = JSON.parse(JSON.stringify(this.personInfo))
      },
    }
  }
</script>

<style scoped>

</style>

